<template>
	<view class="l-barrage">
		<block v-for="(item,index) in items" :key="item.key">
			<view class="aon" :class="'aon aon'+item.key%2" @animationend="aniamtionEnd(item)">
				<u-avatar class="avatar" size="58" :src="item.avatar"></u-avatar>
				<view class="nick ellipsis">{{item.nickname}}</view>
				<view class="far ellipsis">共行走了<text>{{item.mileage}}</text>KM</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	name: 'l-barrage',
	data() {
		return {
			items: [],
			list:[],
			isOver:false,
		}
	},
	methods: {
		add(data = {}) {
			if(data.empty)return false;
			this.items.push(data);
		},
		start(list = []) {
			if(this.list.length)return false;
			this.items = [];

			list.push({empty:true});
			list.push({empty:true});
			this.list = list.map((item,index)=>{
				item.key = index;
				return item;
			});
			clearInterval(this.cycle);
			this.cycle = setInterval(()=> {
				if(this.list.length>0){
					this.add(this.list.shift());
				}
			}, 800)
		},
		aniamtionEnd(data){
			this.items = this.items.filter(item=>{
				return item.key!=data.key;
			})
			if(!this.isOver){
				this.list.push(data);
			}
		},
		insert(data){
			this.list.unshift(data)
		}
	},
	onShow() {
		this.isOver = false;
	},
	onHide() {
		this.isOver = true;
		this.list.length = 0;
		this.items.length = 0;
		clearInterval(this.cycle);
	},
	beforeRouteLeave(){
		clearInterval(this.cycle)
	}
}

</script>

<style lang="scss" scoped>
@keyframes mymove{
    from{transform:translateX(0);}
	to{transform:translateX(-1100rpx);}
}
.aon{
	position: absolute;
	width:240rpx;
	height:62rpx;
	border:2rpx solid #181818;
	border-radius: 36rpx;
	background-color: #fff;
	left:100%;
	animation: mymove 5s linear forwards;
	&.aon0{
		top:11rpx;
	}
	&.aon1{
		top:90rpx;
	}
	&.aon2{
		top:140rpx;
	}
	.avatar{
		position: absolute;
		left:4rpx;
		top:0rpx;
		box-sizing: border-box;
	}

	.nick{
		position: absolute;
		left:70rpx;
		width:170rpx;
		top:0rpx;
		line-height: 1.3;
		color:#181818;
		font-size:20rpx;
		text-align: left;
	}
	.far{
		position: absolute;
		left:70rpx;
		width:170rpx;
		bottom:0rpx;
		line-height: 1.3;
		color:#181818;
		font-size:20rpx;
		text-align: left;
		text{
			//color:#369eff;
		}
	}
}
.l-barrage{
  z-index: 3;
  width: 100%;
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow: hidden;
}



</style>
